<template>
  <div class="header">
    <div class="top">
      <div class="dvp">
        <img src="../../public/imgs/Snipaste_2023-03-13_20-28-09.png" alt="" class="image" />
        <div>
            <p>用户158</p>
            <van-icon name="edit" />
        </div>
        </div>
      <div>
        <ul class="lis">
          <li>
            <span>0</span>
            <h4>收藏</h4>
          </li>
          <li>
            <span>2</span>
            <h4>关注</h4>
          </li>
          <li>
            <span>0</span>
            <h4>积分</h4>
          </li>
          <li>
            <span>0</span>
            <h4>优惠券</h4>
          </li>
        </ul>
      </div>
    </div>
    <div class="center">
      <p>
        <span>药品订单</span>
        <span style="color: #ccc">全部订单 ></span>
      </p>
      <div class="list">
        <div>
            <img src="../../public/imgs/1.png" alt="">
            <p>待付款</p>
        </div>
        <div>
            <img src="../../public/imgs/2.png" alt="">
            <p>待发货</p>
        </div>
        <div>
            <img src="../../public/imgs/3.png" alt="">
            <p>待收货</p>
        </div>
        <div>
            <img src="../../public/imgs/4.png" alt="">
            <p>已完成</p>
        </div>
      </div>
    </div>
    <div class="footer">
        <h3>快捷工具</h3>
        <div>
            <span><van-icon name="bag" />我的问诊</span>
            <span><van-icon name="arrow" /></span>
        </div>
        <div>
            <span><van-icon name="send-gift-o" />我的处方</span>
            <span><van-icon name="arrow" /></span>
        </div>
        <div>
            <span><van-icon name="friends-o" />家庭档案</span>
            <span><van-icon name="arrow" /></span>
        </div>
        <div>
            <span><van-icon name="manager-o" />地址管理</span>
            <span><van-icon name="arrow" /></span>
        </div>
        <div>
            <span><van-icon name="records" />我的评价</span>
            <span><van-icon name="arrow" /></span>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
</script>

<style lang="scss">
.top {
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: linear-gradient(rgba(0, 255, 217, 0.314), rgba(228, 245, 228, 0.36));
}
.lis {
  width: 100%;
  display: flex;
  text-align: center;
  height: 30px;
  margin: 30px 0 0 0;
  li {
    width: 25%;
  }
}
.dvp {
  margin: 10px 10px;
  display: flex;
}
#app {
  padding: 10px;
}
.header {
  background: #d4d2d225;
  height: 100vh;
}
.center {
  width: 95%;
  height: 130px;
  margin: auto;
  background: #fff;
  border-radius: 5px;
  p {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
}
.list{
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: space-around;
}
.footer{
    width: 95%;
    height: 300px;
    background: #fff;
    margin:  10px auto;
     border-radius: 5px;
     div{
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin: 20px 0;
        padding: 0 10px;
     }
}
.image{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
</style>
